<template>
  <div id="app">
<router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
  .layout{
    min-height: 100%;
    background-color: #fff;
    display: flex;
  }
  .sliderBar{
    width: 200px;
    height: 100vh;
    background-color: #304156;
     .slider-logo {
    height: 50px;
    background-color: #2b2f3a;
    a {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFF;
      font-size: 14px;
      font-weight: 600;
       img {
          width: 32px;
          height: 32px;
          margin-right: 12px;
        }
    }
  }
  .sliderBar-fiexd{
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 100%;
    background-color: #304156;
    overflow-y: auto;
    overflow-x: hidden;
     }
  }
  .content-main{
    background: #f3f3f3;
    // height: 2000px;
    flex: 1;

  .nav-bar{
    height: 50px;
    background-color: #fff;
    .nav-bar-fexd{
      width: calc(100% - 200px);
      position: fixed;
      right: 0;
      top:0 ;
      height: 50px;
      background-color: #fff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
  .main{
   padding: 30px 10px;
   min-height: calc(100vh - 50px);
   background-color: red;
  }
}
</style>
